/**
 * User: Célica Calçada
 * Date: 17-08-2013
 * Add poi view
 */

Ext.define('Mobile-app.view.AddPoi', {
    extend: 'Ext.form.Panel',
    alias: 'widget.addpoipanel',

    requires: [
        'Ext.form.FieldSet',
        'Ext.Label'
    ],

    config: {
        modal: true,
        centered: true,
        hideOnMaskTap: true,
        padding: '0 0 0 0',
        height: 320,
        width: '85%',

        layout: {
            type: 'vbox',
            align: 'stretch'
        },

        items: [
            {
                xtype: 'panel',
                scrollable: true,
                padding: '10 10 10 10',
                items: {
                    xtype: 'toolbar',
                    docked: 'top',
                    ui: 'light',
                    title: $.t('main.add poi')
                }
            },
            {
                xtype: 'fieldset',
                id: 'addPoiForm',
                margin: '10 10 10 10',
                layout: 'fit',
                items: [
                    {
                        xtype: 'textfield',
                        itemId: 'name',
                        name: 'name',
                        label: $.t('main.name'),
                        style: 'font-size:80%'
                    },
                    {
                        xtype: 'textfield',
                        itemId: 'description',
                        name: 'description',
                        label: $.t('main.description'),
                        style: 'font-size:80%'
                    },
                    {
                        xtype: 'selectfield',
                        itemId: 'category',
                        name: 'category',
                        label: $.t('main.category'),
                        style: 'font-size:80%',
                        valueField: 'id',
                        displayField: 'description',
                        store: Ext.create('Ext.data.Store', {
                            model: 'Mobile-app.model.PoiCategory',
                            autoLoad: true,
                            sorters: [
                                {
                                    property: "description",
                                    direction: "ASC"
                                }
                            ]
                        })
                    },
                    {
                        xtype: 'numberfield',
                        itemId: 'maximumTimeOfPermanence',
                        name: 'maximumTimeOfPermanence',
                        label: $.t('main.maximum permanence time'),
                        style: 'font-size:80%'
                    },
                    {
                        xtype: 'numberfield',
                        itemId: 'radius',
                        name: 'radius',
                        label: $.t('main.radius') + '(m)',
                        style: 'font-size:80%'

                    }

                ]

            },
            {
                xtype: 'button',
                itemId: 'addButton',
                ui: 'action',
                margin: '10 10 10 10',
                text: $.t('main.save')
            }
        ],
        listeners: [
            {
                delegate: '#addButton',
                event: 'tap',
                fn: 'saveNewPoi'
            }
        ]
    },

    /**
     * Will validate and submit the form
     */
    saveNewPoi: function () {

        var fields = this.down('fieldset').items;

        this.fireEvent('saveNewPoi', fields);
    }

});